<template>
  <VCharts v-if="renderChart" :option="option" :autoresize="autoResize" :style="{ width, height }" />
</template>

<!-- <script setup lang="ts"> -->
<script setup>
import { graphic } from 'echarts'
const props = defineProps({
  名称: {
    type: String,
    default: ""
  },
  单项组: {
    type: Array,
    default: []
  },
  height: {
    type: String,
    default: '300px',
  },
  autoResize: {
    type: Boolean,
    default: true,
  },
  width: {
    type: String,
    default: '100%',
  },
})
import { ref, nextTick, reactive, watch, computed } from 'vue';
import VCharts from 'vue-echarts';
import { useWindowResize } from '@/hooks/use-windows-resize'

const renderChart = ref(false);
nextTick(() => {
  renderChart.value = true;
});
useWindowResize(() => {
  renderChart.value = false;
  nextTick(() => {
    renderChart.value = true;
  });
})
import * as util from '@/amtf/utils';

import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  ToolboxComponent
} from 'echarts/components';

// 注册所需的组件和渲染器
use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  ToolboxComponent
]);

const dataPoints = [
  { 流量: 0, 扬程: 0, 效率: 0 },
  { 流量: 260, 扬程: 104, 效率: 72.9, NPSHr: 3.2 },
  { 流量: 300, 扬程: 90, 效率: 77.6, NPSHr: 3.4 },
  { 流量: 320, 扬程: 100, 效率: 80, NPSHr: 3.5 },
  { 流量: 440, 扬程: 80, 效率: 77.2, NPSHr: 5 }
];

const option = {
  title: {
    text: '泵性能参数变化',
  },
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      let tooltipContent = `<div>流量: ${params[0].axisValue} m³/h</div>`;
      params.forEach(item => {
        let seriesName = item.seriesName;
        let value = item.value[1];
        if (seriesName === '扬程') {
          tooltipContent += `<span style="color:${item.color};">${seriesName}</span>: 扬程 ${value} m<br>`;
        } else if (seriesName === '效率') {
          tooltipContent += `<span style="color:${item.color};">${seriesName}</span>: 效率 ${value} %<br>`;
        } else if (seriesName === 'NPSHr') {
          tooltipContent += `<span style="color:${item.color};">${seriesName}</span>: NPSHr ${value} m<br>`;
        }
      });
      return tooltipContent;
    }
  },
  legend: {
    data: ['扬程', '效率', 'NPSHr']
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  calculable: true,
  xAxis: [
    {
      type: 'value',
      name: '流量 (m³/h)',
      min: 0,
      max: 700,
      splitNumber: 10,
      axisTick: {
        show: true,
        lineStyle: {
          color: 'red'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#000'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ccc',
          width: 2
        }
      },
      minorTick: {
        show: true,
        lineStyle: {
          color: '#ccc'
        }
      },
      minorSplitLine: {
        show: true,
        lineStyle: {
          color: '#ccc',
          width: 1
        }
      },
      axisLabel: {
        formatter: '{value}m³/h'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '扬程 (m)',
      min: 0,
      max: 120,
      splitNumber: 12,
      axisTick: {
        show: true,
        interval: 10,
        lineStyle: {
          color: '#ccc'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#000'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ccc',
          width: 1
        }
      },
      axisLabel: {
        formatter: '{value} m'
      }
    },
    {
      type: 'value',
      name: '效率 (%)',
      min: 0,
      max: 100,
      splitNumber: 10,
      axisTick: {
        show: true,
        interval: 10,
        lineStyle: {
          color: '#ccc'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#000'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ccc',
          width: 1
        }
      },
      axisLabel: {
        formatter: '{value} %'
      }
    },
    {
      type: 'value',
      name: 'NPSHr (m)',
      min: 0,
      max: 10,
      splitNumber: 10,
      axisTick: {
        show: true,
        interval: 1,
        lineStyle: {
          color: '#ccc'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#000'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ccc',
          width: 1
        }
      },
      axisLabel: {
        formatter: '{value} m'
      }
    }
  ],
  series: [
    {
      name: '扬程',
      type: 'line',
      smooth: true,
      data: dataPoints.map(point => [point.流量, point.扬程]),
      markPoint: {
        data: [
          { type: 'max', name: '最大值' },
        ]
      },
    },
    {
      name: '效率',
      type: 'line',
      smooth: true,
      data: dataPoints.map(point => [point.流量, point.效率]),
      markPoint: {
        data: [
          { type: 'max', name: '最大值' },
        ]
      },
    },
    {
      name: 'NPSHr',
      type: 'line',
      smooth: true,
      data: dataPoints.map(point => [point.流量, point.NPSHr]),
      markPoint: {
        data: [
          { type: 'max', name: '最大值' },
          { type: 'min', name: '最小值' }
        ]
      },
    }
  ]
};

</script>
